<template>
  <div class="product-list">
    <h2>商品列表</h2>

    <!-- 添加商品表单 -->
    <form @submit.prevent="addProduct" class="add-product-form">
      <input v-model="newProduct.name" placeholder="商品名称" required />
      <input v-model.number="newProduct.price" type="number" placeholder="价格" required />
      <input v-model.number="newProduct.stock" type="number" placeholder="库存" required />
      <input type="file" @change="handleImageUpload($event, 'new')" accept="image/*" />
      <button type="submit">添加商品</button>
    </form>

    <!-- 商品列表 -->
    <ul>
      <li v-for="(product, index) in products" :key="product.id" class="product-item">
        <div class="product-info">
          <img v-if="product.image" :src="product.image" alt="商品图片" class="product-image" />
          <div>
            <span>{{ product.name }} - ￥{{ product.price }}</span>
            <br />
            <span>库存：{{ product.stock }}</span>
          </div>
        </div>
        <div class="actions">
          <button @click="editProduct(index)">编辑</button>
          <button @click="deleteProduct(index)">删除</button>
        </div>
      </li>
    </ul>

    <!-- 编辑商品表单 -->
    <form v-if="editingIndex !== null" @submit.prevent="saveEdit" class="edit-product-form">
      <h3>编辑商品</h3>
      <input v-model="editedProduct.name" placeholder="商品名称" required />
      <input v-model.number="editedProduct.price" type="number" placeholder="价格" required />
      <input v-model.number="editedProduct.stock" type="number" placeholder="库存" required />
      <input type="file" @change="handleImageUpload($event, 'edit')" accept="image/*" />
      <button type="submit">保存</button>
      <button type="button" @click="cancelEdit">取消</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { id: 1, name: "商品A", price: 100, stock: 50, image: "" },
        { id: 2, name: "商品B", price: 200, stock: 30, image: "" }
      ],
      newProduct: {
        name: "",
        price: 0,
        stock: 0,
        image: ""
      },
      editingIndex: null,
      editedProduct: {
        name: "",
        price: 0,
        stock: 0,
        image: ""
      }
    };
  },
  methods: {
    // 处理图片上传
    handleImageUpload(event, type) {
      const file = event.target.files[0];
      if (file) {
        const imageUrl = URL.createObjectURL(file);
        if (type === "new") {
          this.newProduct.image = imageUrl;
        } else if (type === "edit") {
          this.editedProduct.image = imageUrl;
        }
      }
    },

    // 添加商品
    addProduct() {
      const newId = this.products.length > 0 ? this.products[this.products.length - 1].id + 1 : 1;
      this.products.push({ ...this.newProduct, id: newId });
      this.newProduct = { name: "", price: 0, stock: 0, image: "" }; // 清空表单
    },

    // 删除商品
    deleteProduct(index) {
      this.products.splice(index, 1);
    },

    // 开始编辑商品
    editProduct(index) {
      this.editingIndex = index;
      const product = this.products[index];
      this.editedProduct = { ...product }; // 复制当前商品信息
    },

    // 保存编辑的商品
    saveEdit() {
      this.products[this.editingIndex] = { ...this.editedProduct };
      this.cancelEdit();
    },

    // 取消编辑
    cancelEdit() {
      this.editingIndex = null;
      this.editedProduct = { name: "", price: 0, stock: 0, image: "" }; // 清空编辑表单
    }
  }
};
</script>

<style scoped>
.add-product-form, .edit-product-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.add-product-form input, .edit-product-form input {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.add-product-form button, .edit-product-form button {
  padding: 8px 12px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.add-product-form button:hover, .edit-product-form button:hover {
  background-color: #0056b3;
}

.product-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.product-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.product-image {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 4px;
}

.actions button {
  margin-left: 5px;
  padding: 5px 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.actions button:first-child {
  background-color: #28a745;
  color: white;
}

.actions button:last-child {
  background-color: #dc3545;
  color: white;
}
</style>